<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testZ.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet"href="css/pintuer.css">
	<link rel="stylesheet"href="css/admin.css">
	<link rel="stylesheet"href="js/zTree_v3/css/zTreeStyle/zTreeStyle.css">
	<link rel="stylesheet"href="js/zTree_v3/css/demo.css">
	<script src="js/jq.js"></script>
	<script src="js/pintuer.js"></script>
	<script src="js/zTree_v3/js/jquery.ztree.all.js"></script>
	<script src="js/admin.js"></script>
  </head>

  <script type="text/javascript">
  $(function(){
	   $("#tj").click(function(){
		   var roleName = $("#roleName").val();
		   var roleId = $("#roleId").val();
		   var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		   var nodes = treeObj.getCheckedNodes(true);
		   var nodeJson = [];
		   var data = $("#data");
		   for (var i = 0; i < nodes.length; i++){
			   data.append("<input type='text' name='id' value='"+nodes[i].id+"' >");
			   data.append("<input type='text' name='name' value='"+nodes[i].name+"' >");
			   data.append("<input type='text' name='pid' value='"+nodes[i].MenuPid+"' >");
		   }
	   })
  })
		   
		   
		   
          
          
          
  </script>
  <body>
  <form action="RoleServlet?method=Test" method="post" id="data">
  
  <!-- 树生成后所在的地方（存放树的地方） -->
  <ul id = "treeDemo" class="ztree"></ul>
  <input type="submit" value="提交" id="tj">
  <div style="border: 1px solid; width: 100px;height: 100px; left: 1000px" ></div>
  </form>
    
  </body>
<script type="text/javascript">
var setting = {

        key: {
            url:"url",//节点url
            name:"name"//节点名
        },
        data:{	
            simpleData:{
                enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式
                idKey:"id",//节点id
                pIdKey:"MenuPid",//父节点id
                rootPId:0//我也不知道有什么用
            }
        },
        //有没有无所谓，这是展示树一些功能
        view:{
        	//设置 zTree 是否显示节点的图标。
            showIcon: true,
//            fontCss:{color:"#FFFFFF", background:"gray"}
        },
        //选择节点
        check: {
			enable: true,
			chkStyle: "checkbox",
			chkboxType: { "Y": "p", "N": "s" }
		}
};

$(document).ready(function(){
	//页面加载完成后执行以下方法
    initZTree();
});

//初始化树
function initZTree(){
    $.ajax({
          url:"MenuTreeServlet",
          type:"post",
          success: function(data){
        	  //将获得的json格式的数据转为js格式
              eval("var zNode ="+data);
              //树的初始化（固定格式）
              var zTreeObj = $.fn.zTree.init($("#treeDemo"),setting, zNode); 
              //让第一个父节点展开
//              var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);
//              zTreeObj.expandNode(rootNode_0, true, false, false, false);
          },
          error: function(){
              
          }
      });
}

</script>
<!--         async: {
            enable: true,
            url:"TestServlect",
            autoParam:["MenuId", "MenuPid", "name"],
            dataFilter: filter,
            dataType: "json"
        }, -->
</html>